<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Meta -->
    <meta name="description" content="Best Bootstrap Admin Dashboards">
    <meta name="author" content="Bootstrap Gallery">
    

    <meta property="og:title" content="Admin Templates - Dashboard Templates | Bootstrap Gallery">
    <meta property="og:description" content="Marketplace for Bootstrap Admin Dashboards">
    <meta property="og:type" content="Website">
    <meta property="og:site_name" content="Bootstrap Gallery">
    <link rel="shortcut icon" href="assets/images/favicon.svg">

    <!-- Title -->
    <title>Bootstrap Gallery - Elite Admin Dashboard Template</title>

    <!-- *************
			************ Common Css Files *************
		************ -->
    <!-- Bootstrap css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <!-- Bootstrap font icons css -->
    <link rel="stylesheet" href="assets/fonts/bootstrap/bootstrap-icons.css">

    <!-- Main css -->
    <link rel="stylesheet" href="assets/css/main.min.css">

    <!-- *************
			************ Vendor Css Files *************
		************ -->

    <!-- Scrollbar CSS -->
    <link rel="stylesheet" href="assets/vendor/overlay-scroll/OverlayScrollbars.min.css">
  </head>

  <body>

    <!-- 页面包装器开始 -->
    <div class="page-wrapper">

      <!-- 页面标题开始 -->
      <div class="page-header">

        <!-- 侧边栏品牌开始 -->
        <div class="brand">
          <a href="/admin/support" class="logo">
            <img src="assets/images/logo.svg" class="d-none d-md-block me-4" alt="Admin Dashboards">
            <img src="assets/images/logo-sm.svg" class="d-block d-md-none me-4" alt="Admin Dashboards">
          </a>
        </div>
        <!-- 侧边栏品牌结束 -->

        <div class="toggle-sidebar" id="toggle-sidebar">
          <i class="bi bi-list"></i>
        </div>

        <!-- 头部标题操作容器启动 -->
        <div class="header-actions-container">

          <!--搜索容器启动-->
          <div class="search-container me-4 d-xl-block d-lg-none">

            <!-- 搜索输入组开始 -->
            <div class="input-group">
              <input type="text" class="form-control" id="searchAny" placeholder="搜索">
              <button class="btn btn-outline-secondary" type="button">
                <i class="bi bi-search"></i>
              </button>
            </div>
            <!-- 搜索输入组结束 -->

          </div>
          <!-- 搜索容器端 -->

          <!-- 标题动作开始 -->
          <div class="header-actions d-xl-flex d-lg-none gap-4">
            <div class="dropdown">
              <a class="dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-envelope-open fs-5 lh-1"></i>
                <span class="count-label">9</span>
              </a>
              <div class="dropdown-menu dropdown-menu-end shadow-lg">
                <div class="dropdown-item">
                  <div class="d-flex py-2 border-bottom">
                    <img src="assets/images/user.png" class="img-3x me-3 rounded-3" alt="Admin Dashboards">
                    <div class="m-0">
                      <h6 class="mb-1 fw-semibold">Sophie Michiels</h6>
                      <p class="mb-1">Membership has been ended.</p>
                      <p class="small m-0 text-secondary">Today, 07:30pm</p>
                    </div>
                  </div>
                </div>
                <div class="dropdown-item">
                  <div class="d-flex py-2 border-bottom">
                    <img src="assets/images/user2.png" class="img-3x me-3 rounded-3" alt="Admin Dashboards">
                    <div class="m-0">
                      <h6 class="mb-1 fw-semibold">Benjamin Michiels</h6>
                      <p class="mb-1">Congratulate, James for new job.</p>
                      <p class="small m-0 text-secondary">Today, 08:00pm</p>
                    </div>
                  </div>
                </div>
                <div class="dropdown-item">
                  <div class="d-flex py-2">
                    <img src="assets/images/user1.png" class="img-3x me-3 rounded-3" alt="Admin Dashboards">
                    <div class="m-0">
                      <h6 class="mb-1 fw-semibold">Jehovah Roy</h6>
                      <p class="mb-1">Lewis added new schedule release.</p>
                      <p class="small m-0 text-secondary">Today, 09:30pm</p>
                    </div>
                  </div>
                </div>
                <div class="d-grid mx-3 my-1">
                  <a href="javascript:void(0)" class="btn btn-primary">View all</a>
                </div>
              </div>
            </div>
            <a href="/admin/accountSettings" data-bs-toggle="tooltip" data-bs-placement="bottom"
               data-bs-custom-class="custom-tooltip-blue" data-bs-title="设置">
              <i class="bi bi-gear font-1xx"></i>
            </a>
          </div>
          <!--标题动作开始 -->

          <!--用户配置文件开始-->
          <div class="header-profile d-flex align-items-center">
            <div class="dropdown">
              <a href="#" id="userSettings" class="user-settings" data-toggle="dropdown" aria-haspopup="true">
                <span class="user-name d-none d-md-block">个人用户名</span>
                <span class="avatar">
                  <img src="assets/images/user2.png" alt="Admin Templates">
                  <span class="status online"></span>
                </span>
              </a>
              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="userSettings">
                <div class="header-profile-actions">
                  <a href="/admin/subscribers">订阅信息</a>
                  <a href="/admin/accountSettings">个人设置</a>
                  <a href="/admin/login">登出</a>
                </div>
              </div>
            </div>
          </div>
          <!-- 用户配置文件结束 -->

        </div>
        <!-- 标题操作容器端 -->

      </div>
      <!-- 头部页面标题结束 -->

      <!-- 主要容器启动 -->
      <div class="main-container">

        <!-- 侧边栏包装器开始 -->
        <nav class="sidebar-wrapper">

          <!-- 侧边栏自定义导航启动 -->
          <div class="sidebar-custom-nav">
            <a href="/admin/support">
              <i class="bi bi-headset"></i>
              <span>Support</span>
            </a>
            <a href="/admin/subscribers">
              <i class="bi bi-bar-chart-line"></i>
              <span>Subscribers</span>
            </a>
            <a href="/admin/accountSettings">
              <i class="bi bi-gear"></i>
              <span>Settings</span>
            </a>
            <a href="/admin/invoiceList">
              <i class="bi bi-graph-up-arrow"></i>
              <span>Invoices</span>
            </a>
          </div>
          <!-- 侧边栏自定义导航端 -->

          <!-- 侧栏菜单开始 -->
          <div class="sidebar-menu">
            <div class="sidebarMenuScroll">
              <ul>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-house"></i>
                    <span class="menu-text">Dashboards</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="index.html">Analytics</a>
                      </li>
                      <li>
                        <a href="dashboard2.html">Sales</a>
                      </li>
                      <li>
                        <a href="dashboard3.html">CRM</a>
                      </li>
                      <li>
                        <a href="dashboard4.html">Projects</a>
                      </li>
                      <li>
                        <a href="dashboard5.html">Statistics</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <a href="widgets.html">
                    <i class="bi bi-box"></i>
                    <span class="menu-text">Widgets</span>
                  </a>
                </li>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-collection"></i>
                    <span class="menu-text">UI Elements</span>
                    <span class="badge red">15</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="accordions.html">Accordions</a>
                      </li>
                      <li>
                        <a href="alerts.html">Alerts</a>
                      </li>
                      <li>
                        <a href="buttons.html">Buttons</a>
                      </li>
                      <li>
                        <a href="badges.html">Badges</a>
                      </li>
                      <li>
                        <a href="cards.html">Cards</a>
                      </li>
                      <li>
                        <a href="advanced-cards.html">Advanced Cards</a>
                      </li>
                      <li>
                        <a href="carousel.html">Carousel</a>
                      </li>
                      <li>
                        <a href="dropdowns.html">Dropdowns</a>
                      </li>
                      <li>
                        <a href="icons.html">Icons</a>
                      </li>
                      <li>
                        <a href="list-items.html">List Items</a>
                      </li>
                      <li>
                        <a href="modals.html">Modals</a>
                      </li>
                      <li>
                        <a href="offcanvas.html">Off Canvas</a>
                      </li>
                      <li>
                        <a href="progress.html">Progress Bars</a>
                      </li>
                      <li>
                        <a href="spinners.html">Spinners</a>
                      </li>
                      <li>
                        <a href="tabs.html">Tabs</a>
                      </li>
                      <li>
                        <a href="tooltips.html">Tooltips</a>
                      </li>
                      <li>
                        <a href="typography.html">Typography</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-stickies"></i>
                    <span class="menu-text">Pages</span>
                    <span class="badge blue">8</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="support.html">Support</a>
                      </li>
                      <li>
                        <a href="create-invoice.html">Create Invoice</a>
                      </li>
                      <li>
                        <a href="view-invoice.html">View Invoice</a>
                      </li>
                      <li>
                        <a href="invoiceList.html">Invoice List</a>
                      </li>
                      <li>
                        <a href="subscribers.html">Subscribers</a>
                      </li>
                      <li>
                        <a href="contacts.html">Contacts</a>
                      </li>
                      <li>
                        <a href="pricing.html">Pricing</a>
                      </li>
                      <li>
                        <a href="profile.html">Profile</a>
                      </li>
                      <li>
                        <a href="starter-page.html">Starter Page</a>
                      </li>
                      <li>
                        <a href="starter-page-no-quick-menu.html">No Quick Menu</a>
                      </li>
                      <li>
                        <a href="accountSettings.html">Account Settings</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-calendar4"></i>
                    <span class="menu-text">Events</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="events.html">Events List</a>
                      </li>
                      <li>
                        <a href="calendar.html">Daygrid</a>
                      </li>
                      <li>
                        <a href="calendar-draggable.html">External Draggable</a>
                      </li>
                      <li>
                        <a href="calendar-google.html">Google Calendar</a>
                      </li>
                      <li>
                        <a href="calendar-list-view.html">List View</a>
                      </li>
                      <li>
                        <a href="calendar-selectable.html">Selectable</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-columns-gap"></i>
                    <span class="menu-text">Forms</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="form-inputs.html">Form Inputs</a>
                      </li>
                      <li>
                        <a href="form-checkbox-radio.html">Checkbox &amp; Radio</a>
                      </li>
                      <li>
                        <a href="form-file-input.html">File Input</a>
                      </li>
                      <li>
                        <a href="form-validations.html">Validations</a>
                      </li>
                      <li>
                        <a href="date-time-pickers.html">Date Time Pickers</a>
                      </li>
                      <li>
                        <a href="input-mask.html">Input Masks</a>
                      </li>
                      <li>
                        <a href="form-layouts.html">Form Layouts</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-window-split"></i>
                    <span class="menu-text">Tables</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="tables.html">Tables</a>
                      </li>
                      <li>
                        <a href="data-tables.html">Data Tables</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-map"></i>
                    <span class="menu-text">Graphs &amp; Maps</span>
                    <span class="badge green">15</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="apex.html">Apex</a>
                      </li>
                      <li>
                        <a href="morris.html">Morris</a>
                      </li>
                      <li>
                        <a href="maps.html">Maps</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-layout-sidebar"></i>
                    <span class="menu-text">Layouts</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="layout.html">Default Layout</a>
                      </li>
                      <li>
                        <a href="layout-grid.html">Grid Layout</a>
                      </li>
                      <li>
                        <a href="layout-mega-menu.html">Mega Menu</a>
                      </li>
                      <li>
                        <a href="layout-full-screen.html">Full Screen</a>
                      </li>
                      <li>
                        <a href="hero-header.html">Hero Header</a>
                      </li>
                      <li>
                        <a href="layout-datepicker.html">Layout Datepicker</a>
                      </li>
                      <li>
                        <a href="sidebar-quick-links.html">Sidebar Quick Links</a>
                      </li>
                      <li>
                        <a href="layout-welcome.html">Welcome Layout</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="sidebar-dropdown">
                  <a href="#">
                    <i class="bi bi-upc-scan"></i>
                    <span class="menu-text">Authentication</span>
                  </a>
                  <div class="sidebar-submenu">
                    <ul>
                      <li>
                        <a href="login.html">Login</a>
                      </li>
                      <li>
                        <a href="signup.html">Signup</a>
                      </li>
                      <li>
                        <a href="forgot-password.html">Forgot Password</a>
                      </li>
                      <li>
                        <a href="error.html">Error</a>
                      </li>
                      <li>
                        <a href="maintenance.html">Maintenance</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="active-page-link">
                  <a href="support.html">
                    <i class="bi bi-code-square"></i>
                    <span class="menu-text">Support</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- 侧栏菜单结束 -->

        </nav>
        <!-- 侧边栏包装端 -->

        <!-- 内容包装器滚动开始 -->
        <div class="content-wrapper-scroll">

          <!-- 主标头开始 -->
          <div class="main-header d-flex align-items-center justify-content-between position-relative">
            <div class="d-flex align-items-center justify-content-center">
              <div class="page-icon pe-3">
                <i class="bi bi-code-square"></i>
              </div>
              <div class="page-title d-none d-md-block">
                <h5>Support</h5>
              </div>
            </div>
            <!-- 实时更新开始 -->
            <ul class="updates d-flex align-items-end flex-column overflow-hidden" id="updates">
              <li>
                <a href="javascript:void(0)">
                  <i class="bi bi-envelope-paper text-red font-1x me-2"></i>
                  <span>12 emails from David Michaiah.</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)">
                  <i class="bi bi-bar-chart text-blue font-1x me-2"></i>
                  <span>15 new features updated successfully.</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)">
                  <i class="bi bi-folder-check text-yellow font-1x me-2"></i>
                  <span>The media folder is created successfully.</span>
                </a>
              </li>
            </ul>
            <!-- 实时更新结束 -->
          </div>
          <!-- 主要标题末端 -->

          <!-- 内容包装器开始 -->
          <div class="content-wrapper">
            <div class="hero-header shade-primary">
              <div class="container-fluid">
                <!-- 行启动 -->
                <div class="row justify-content-center">
                  <div class="col-xxl-10">
                    <div class="text-center">
                      <h1 class="text-white mb-3">What are you looking for?</h1>
                      <h5 class="text-white mb-3">
                        Get help straight from our team
                      </h5>
                      <div class="input-group w-50 m-auto">
                        <input type="text" class="form-control form-control-lg" id="searchData" placeholder="Search">
                        <button class="btn btn-success btn-lg" type="button">
                          Search
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 排结束 -->
              </div>
            </div>
            <div class="hero-body">
              <!-- Row start -->
              <div class="row justify-content-center">
                <div class="col-xxl-10">
                  <!-- Row start -->
                  <div class="row gx-3">
                    <div class="col-md-3 col-sm-6 col-12">
                      <div class="card mb-3">
                        <div class="card-body py-4 px-3">
                          <div class="d-flex align-items-center flex-column">
                            <div class="box-light-red rounded-5 icon-box xl mb-4">
                              <i class="bi bi-check-circle text-red font-2xx"></i>
                            </div>
                            <h4>Requirements</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12">
                      <div class="card mb-3">
                        <div class="card-body py-4 px-3">
                          <div class="d-flex align-items-center flex-column">
                            <div class="box-light-blue rounded-5 icon-box xl mb-4">
                              <i class="bi bi-check-circle text-blue font-2xx"></i>
                            </div>
                            <h4>Licensing</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12">
                      <div class="card mb-3">
                        <div class="card-body py-4 px-3">
                          <div class="d-flex align-items-center flex-column">
                            <div class="box-light-green rounded-5 icon-box xl mb-4">
                              <i class="bi bi-check-circle text-green font-2xx"></i>
                            </div>
                            <h4>Troubleshooting</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12">
                      <div class="card mb-3">
                        <div class="card-body py-4 px-3">
                          <div class="d-flex align-items-center flex-column">
                            <div class="box-light-yellow rounded-5 icon-box xl mb-4">
                              <i class="bi bi-check-circle text-yellow font-2xx"></i>
                            </div>
                            <h4>Pricing</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Row end -->
                </div>
              </div>
              <!-- Row end -->

              <!-- Row start -->
              <div class="row justify-content-center">
                <div class="col-xxl-10">
                  <div class="card mb-3">
                    <div class="card-body p-5">
                      <a href="#">
                        <h5 class="text-primary fw-bold mb-3">
                          Account settings &amp; theming
                        </h5>
                        <h6 class="text-muted">
                          How to edit account settings such as email addresss,
                          user name, contact details, and switch to differne
                          themes.
                        </h6>
                        <div class="d-flex align-items-center mt-4">
                          <img class="img-4x rounded-circle" src="assets/images/user4.png" alt="Bootstrap Gallery">
                          <div class="ms-3">
                            <h6 class="mb-1">Updated 2 days ago</h6>
                            <p class="text-muted m-0">
                              Written by &nbsp; Shelomi Sarah
                            </p>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="card mb-3">
                    <div class="card-body p-5">
                      <a href="#">
                        <h5 class="text-primary fw-bold mb-3">
                          Creating and managing web applications
                        </h5>
                        <h6 class="text-muted">
                          How to create and manage the web applications and its
                          settings.
                        </h6>
                        <div class="d-flex align-items-center mt-4">
                          <img class="img-4x rounded-circle" src="assets/images/user3.png" alt="Bootstrap Gallery">
                          <div class="ms-3">
                            <h6 class="mb-1">Updated 5 days ago</h6>
                            <p class="text-muted m-0">
                              Written by &nbsp; Tiya Davidson
                            </p>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="card mb-3">
                    <div class="card-body p-5">
                      <a href="#">
                        <h5 class="text-primary fw-bold mb-3">
                          Images and UI elements
                        </h5>
                        <h6 class="text-muted">
                          How to customize ui elements and images based on
                          customer requirement.
                        </h6>
                        <div class="d-flex align-items-center mt-4">
                          <img class="img-4x rounded-circle" src="assets/images/user1.png" alt="Bootstrap Gallery">
                          <div class="ms-3">
                            <h6 class="mb-1">Updated 2 weeks ago</h6>
                            <p class="text-muted m-0">
                              Written by &nbsp; Roosy Johnson
                            </p>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Row end -->

              <!-- Row start -->
              <div class="row justify-content-center">
                <div class="col-xxl-10">
                  <div class="card mb-3">
                    <div class="card-body p-5">
                      <h4 class="text-center">
                        Can't find what you are looking for? Let us know!
                      </h4>

                      <!-- Row start -->
                      <div class="row justify-content-center">
                        <div class="col-sm-6 col-12">
                          <div class="mb-3 mt-5">
                            <label class="form-label" for="abc">Name</label>
                            <input type="text" class="form-control" id="abc" placeholder="Enter full name">
                          </div>
                          <div class="mb-3">
                            <label class="form-label" for="abc2">Email</label>
                            <input type="email" class="form-control" id="abc2" placeholder="Enter email address">
                          </div>
                          <div class="mb-3">
                            <label class="form-label" for="abc3">Message</label>
                            <textarea class="form-control" id="abc3" placeholder="Enter message" rows="5"></textarea>
                          </div>
                          <div class="mb-3">
                            <div class="d-flex gap-2 justify-content-end">
                              <button type="button" class="btn btn-outline-secondary">
                                Cancel
                              </button>
                              <button type="button" class="btn btn-success">
                                Submit
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Row end -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- Row end -->
            </div>
          </div>
          <!-- Content wrapper end -->

        </div>
        <!-- Content wrapper scroll end -->

        <!-- App Footer start -->
        <div class="app-footer">
          <span>© Bootstrap Gallery 2024 By <a href="https://www.bootstrapmb.com">bootstrapMB</a></span>
        </div>
        <!-- App footer end -->

      </div>
      <!-- Main container end -->

    </div>
    <!-- Page wrapper end -->

    <!-- *************
			************ Required JavaScript Files *************
		************* -->
    <!-- Required jQuery first, then Bootstrap Bundle JS -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/modernizr.js"></script>
    <script src="assets/js/moment.js"></script>

    <!-- *************
			************ Vendor Js Files *************
		************* -->

    <!-- Overlay Scroll JS -->
    <script src="assets/vendor/overlay-scroll/jquery.overlayScrollbars.min.js"></script>
    <script src="assets/vendor/overlay-scroll/custom-scrollbar.js"></script>

    <!-- News ticker -->
    <script src="assets/vendor/newsticker/newsTicker.min.js"></script>
    <script src="assets/vendor/newsticker/custom-newsTicker.js"></script>

    <!-- Main Js Required -->
    <script src="assets/js/main.js"></script>
  </body>

</html>
